<template>
	<view class="order">
		<view class="block" @click="onAddressTap" v-if="dataObj.showAddress">
			<view class="address" v-if="dataObj.address.id">
				<view class="info">
					<span class="name">{{dataObj.address.name}}</span>
					<span class="mobile">{{dataObj.address.mobile}}</span>
				</view>
				<view class="detail">{{dataObj.address.address}}</view>
			</view>
			<view class="address" v-else>
				<view class="info">请填写地址</view>
			</view>
		</view>
		<view class="block" v-for="(item, idx) in dataObj.list" :key="item.id">
			<view class="content" :class="pageObj.classObj[item.cat_type]">
				<image class="cover" :src="item.products.image_path"></image>
				<view class="title ellipsis-2">{{item.products.name}}</view>
				<view class="price">
					价格：<span class="number">{{item.products.amount * item.nums}}</span>
				</view>
			</view>
			<!-- 书籍 -->
			<view class="info" v-if="pageObj.classObj[item.cat_type] === 'book'">
				<view class="info-item">
					<view class="title">课程形式</view>
					<span class="text">{{pageObj.typeObj[item.cat_type]}}</span>
				</view>
				<view class="info-item">
					<view class="title">作者</view>
					<span class="text">马会，民生，张政暗</span>
				</view>
			</view>
			<!-- 课程、题库 -->
			<view class="info" v-if="pageObj.classObj[item.cat_type] !== 'book'">
				<view class="info-item">
					<view class="title">课程总课时</view>
					<span class="text">共{{item.products.class_count || '0'}}课时</span>
				</view>
				<view class="info-item">
					<view class="title">课程讲师</view>
					<span class="text">{{item.products.teacher}}</span>
				</view>
				<view class="info-item">
					<view class="title">课程形式</view>
					<span class="text">{{pageObj.typeObj[item.cat_type]}}</span>
				</view>
			</view>
		</view>
		<view class="block" v-if="dataObj.orderCount">
			<view class="info-item" @click="onCouponTap">
				<view class="title">优惠券</view>
				<span class="text">{{couponObj.name ? couponObj.name : '请选择优惠券 >'}}</span>
			</view> 
		</view>
		<view class="footer">
			<view class="number">
				合计：
				<span class="unit">¥</span>
				<span class="sum">{{dataObj.amount}}</span>
			</view>
			<view class="btn" @click="onPostOrderTap">提交订单</view>
		</view>
		
	</view>
</template>

<script>
	import { requestErrorTip, getInfoData } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					typeObj: {
						'1': '课程',
						'2': '培训',
						'3': '实物书籍',
						'4': '题库',
						'5': '充值'
					},
					classObj: {
						'1': 'class',
						'2': 'class',
						'3': 'book',
						'4': 'question'
					}
				},
				dataObj: {
					ids: [],
					showAddress: false,
					orderCount: 0,
					address: {
						id: '',
						name: '',
						mobile: '',
						address: ''
					},
					list: [],
					amount: '0.00'
				},
				couponObj: {},
			}
		},
		onLoad(event) {
			this.dataObj['ids'] = event['ids']; // 获取页面数据类型
			this.getData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			if (this.dataObj['showAddress']) {
				this.getDefaultAddress();
			}
			this.couponObj = uni.getStorageSync('couponObj');
			this.getData();
		},
		// 页面卸载
		onUnload() {
			// 清除couponObj
			uni.removeStorageSync('couponObj');
		},
		methods: {
			// 地址点击
			onAddressTap() {
				uni.navigateTo({
					url: './address'
				});
			},
			// 优惠券
			onCouponTap() {
				uni.navigateTo({
					url: '../user/assets/coupon?fromPage=createOrder'
				});
			},
			// 提交订单点击事件
			onPostOrderTap() {
				let navigateUrl = './pay-order?payment_type=1&ids=' + this.dataObj['ids'];
				if (this.dataObj['showAddress']) {
					if (!this.dataObj['address']['id']) {
						requestErrorTip('toast', '请选择或填写地址');
						return false;
					}
					// 有书籍，就带地址id
					navigateUrl += '&ship_id=' + this.dataObj['address']['id'];
				}
				if (this.couponObj['couponCode']) {
					// 选中优惠券，带优惠券码
					navigateUrl += '&coupon_code=' + this.couponObj['couponCode'];
				}
				
				// 清除couponObj
				uni.removeStorageSync('couponObj');
				if (Number(this.dataObj.amount) > 0) {
					// 调制付款页面
					uni.navigateTo({
						url: navigateUrl
					});
				} else {
					// 创建订单
					this.postCreateOrder();
				}
			},
			// 创建订单（消费）
			postCreateOrder() {
				let pData = {
					cart_ids: this.dataObj['ids'],
					coupon_code: this.couponObj['couponCode']
				};
				if (this.dataObj['address']['id']) {
					pData['ship_id'] = this.dataObj['address']['id'];
				}
				this.$Requset({
					url: this.$Api['order']['create'],
					data: pData,
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						// 成功跳转
						uni.navigateTo({
							url: './pay-success?payment_type=1&order_id=' + data['order_id']
						});
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 检查商品是否含有书籍
			checkGoods() {
				for(let i in this.dataObj['list']) {
					const item = this.dataObj['list'][i];
					if (item['cat_type'] === 3) {
						this.dataObj['showAddress'] = true;
						this.getDefaultAddress();
						break;
					}
				}
			},
			// 获取购物车全部商品
			getData() {
				this.couponObj = uni.getStorageSync('couponObj') || {};
				this.$Requset({
					url: this.$Api['cart']['list'],
					data: {
						ids: this.dataObj['ids'],
						coupon_code: this.couponObj['couponCode'] || ''
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.dataObj['list'] = data['list'] || [];
						this.dataObj['amount'] = data['amount'] || '0.00';
						// 从缓存中获取
						getInfoData((res) => {
							this.dataObj['orderCount'] = Number(res['order_count']);
						});
						this.checkGoods();
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取默认收获地址
			getDefaultAddress() {
				this.$Requset({
					url: this.$Api['address']['getDefault'],
					data: {},
					success: (res) => {
						const { data, msg, status } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.dataObj['address'] = data;
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.order{
		padding-top: 18rpx;
		padding-bottom: 90rpx;
		.address{
			position: relative;
			padding: 16rpx 40rpx 16rpx 90rpx;
			&::before{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 72rpx;
				height: 100%;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 72rpx 72rpx;
				background-image: url(../../static/images/order/position.png);
			}
			&::after{
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				width: 30rpx;
				height: 100%;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 30rpx 30rpx;
				background-image: url(../../static/images/common/arrow-right.png);
			}
			.name{
				font-size: 30rpx;
				color: #1A1A1A;
				margin-right: 14rpx;
			}
			.mobile{
				font-size: 26rpx;
				color: #7F7F7F;
				vertical-align: top;
			}
			.detail{
				line-height: 40rpx;
				font-size: 26rpx;
				color: #1A1A1A;
			}
			.info{
				line-height: 40rpx;
				font-size: 30rpx;
				color: #1A1A1A;
			}
		}
		.content{
			position: relative;
			margin-bottom: 24rpx;
			.cover{
				position: absolute;
				top: 0;
				left: 0;
				background-color: #F7F7F7;
				border-radius: 14rpx;
			}
			.title{
				height: 80rpx;
				line-height: 40rpx;
				font-size: 26rpx;
				color: #1A1A1A;
			}
			.price{
				height: 46rpx;
				line-height: 46rpx;
				font-size: 22rpx;
				color: #7F7F7F;
				.number{
					font-size: 30rpx;
					font-weight: bold;
					color: $color-common;
				}
			}
		}
		.question,
		.class{
			padding-left: 272rpx;
			.cover{
				width: 254rpx;
				height: 158rpx;
			}
			.title{
				height: 80rpx;
				margin-bottom: 32rpx;
			}
		}
		.book{
			padding-left: 164rpx;
			.cover{
				width: 144rpx;
				height: 180rpx;
			}
			.title{
				height: 120rpx;
				margin-bottom: 16rpx;
			}
		}
		.info{
			&-item{
				line-height: 40rpx;
				font-size: 26rpx;
				color: #7F7F7F;
				text-align: right;
				margin-bottom: 24rpx;
				&:nth-last-child(1){
					margin-bottom: 0;
				}
				.title{
					float: left;
					width: 200rpx;
					color: #1A1A1A;
					text-align: left;
				}
			}
		}
		.footer{
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			padding: 10rpx 200rpx 10rpx 36rpx;
			background-color: #FFFFFF;
			.number{
				line-height: 70rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				.unit{
					color: $color-common;
				}
				.sum{
					font-size: 40rpx;
					font-weight: bold;
					color: $color-common;
				}
			}
			.btn{
				position: absolute;
				top: 10rpx;
				right: 36rpx;
				width: 218rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 35rpx;
			}
		}
	}
</style>
